<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      *{
          margin: 0 auto;
          padding: 0;
        background-color: #ccdcfb;
      }
    .box{
        width: 300px;
        height: 500px;
      border-radius: 0 0 10px 10px;
        background-color: white;
      float: left;
      margin-left: 100px;

    }
    .top1{
        width: 100%;
        height: 200px;
      background-repeat: no-repeat;
        background-image: url("img/人工智能.png");
      background-size: cover;
        text-align: center;
        line-height: 100px;
        font-weight: bold;
        border-radius: 10px 10px 0 0;
      }
    .top2{
        width: 100%;
        height: 200px;
        background-repeat: no-repeat;
        background-image: url("img/电池.png");
        background-size: cover;
        text-align: center;
        line-height: 100px;
        font-weight: bold;
        border-radius: 10px 10px 0 0;
      }
    .top3{
     width: 100%;
     height: 200px;
     background-repeat: no-repeat;
      background-image: url("img/教育.png");
      background-size: cover;
      text-align: center;
      line-height: 100px;
      font-weight: bold;
      border-radius: 10px 10px 0 0;
    }
    h1{
      font-size: 20px;
      padding-top: 20px;
      background-color: white;
      padding-left: 10px;
    }
    p{
      font-size: 15px;
      padding-top: 10px;
      background-color: white;
      padding-left: 10px;
    }
    .span1{
      display: inline-block;
      font-size: 15px;
      margin-top: 10px;
      color: grey;
      padding-left: 10px;

    }
    .span2{
      display: inline-block;
    font-size: 15px;
    margin-top: 10px;
    color: grey;
    padding-left: 110px;
    }
    button{
      width: 100px;
      height: 50px;
      background-color: cornflowerblue;
      color: white;
      margin-top: 10px;
      border: none;
      margin-left: 10px;
    }
  </style>
</head>
<body>
<div class="box">
  <div class="top1"></div>
  <h1>⼈⼯智能技术的最新突破将改变医疗⾏业</h1>
  <p>⼈员开发出⼀种新型AI算法，能够以95%的准确率早期诊断多种疾病，这项技术预计将在未来三年内投⼊临床应⽤...</p>
  <br>
  <hr>
  <p class="span1">作者：王教授</p>
  <p class="span2">2023-03-22</p>
  <br>
  <button>阅读更多</button>
</div>

<div class="box">
  <div class="top2"></div>
  <h1>新能源企业发布⾰命性电池技术</h1>
  <p>国内某新能源公司宣布研发出充电速度提升5倍的新型电池，续航⾥程可达1000公⾥，这项技术有望彻底解决电动汽⻋的⾥程焦虑问题...</p>
  <br>
  <hr>
  <p class="span1">作者：李记者</p>
  <p class="span2">2023-06-10</p>
  <br>
  <button>阅读更多</button>
</div>
<div class="box">
  <div class="top3"></div>
  <h1>教育部推出新政策促进职业教育发展</h1>
  <p>为适应产业升级需求，教育部将投⼊100亿元专项资⾦⽤于职业教育改⾰，重点培养数字经济、智能制造等领域的⾼技能⼈才...</p>
  <br>
  <hr>
  <p class="span1">作者：张编辑</p>
  <p class="span2">2023-06-05</p>
  <br>
  <button>阅读更多</button>
</div>
</body>
</html>